<!DOCTYPE html>
<html>
    <head>
        <title>Candy</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="css/layout.css" />
        <link type="text/css" rel="stylesheet" href="css/widgets.css" />
        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="js/coin-slider/coin-slider.js"></script>
        <link rel="stylesheet" href="js/coin-slider/coin-slider-styles.css" type="text/css"/>
        <link rel="stylesheet" href="js/treeview/jquery.treeview.css" />
        <script src="js/treeview/lib/jquery.cookie.js" type="text/javascript"></script>
        <script src="js/treeview/jquery.treeview.js" type="text/javascript"></script>
        <script src="js/capslide/jquery.capSlide.js" type="text/javascript"></script>
        <link rel="stylesheet" href="js/capslide/css/modify_style.css" />

        <script type="text/javascript">
            $(document).ready(function(){
                $(".product_category").treeview({
                    animated:"normal",
                    persist: "cookie"
                });
                
                $(".product_items").capslide({
                    caption_color	: '#bfedfa',
                    overlay_bgcolor : '#000',
                    showcaption	    : false
                });
                
                $ ('.product_feature ul.list li').each(function(i){
                    var newClass = '';
       
                    if ((i+1) % 3 == 0) {
                        newClass = 'last';
                    }
                    $(this).addClass(newClass);
        
                });
                
                $('.link_list_1 ul.list li:last-child').addClass('last');
            });
        </script>
    </head>

    <body>
        <div id="wrapper">
            <div id="wrapper_top">
                <div id="hook_top_1" class="hook">
                    <div id="hook_top_1_1" class="hook">
                        <!-- USER BLOCK -->
                        <div id="user_block_wi" class="user_block">
                            <div class="user_infor">Welcome <a href="#">(login)</a></div>
                        </div>
                        <!-- END USER BLOCK -->

                        <!-- WIDGET CART BLOCK -->
                        <div id="cart_block_wi" class="cart_block">
                            <ul>
                                <li><a href="#">Your cart</a></li>
                                <li class="cart_block_infor"><a href="#"><span id="cart_total_products"> 0 </span> item(s)</a></li>
                            </ul>
                        </div>
                        <!-- END WIDGET CART BLOCK 3 -->
                    </div>

                </div>
                <!-- End #hook_top_1 -->

                <div id="hook_top_2" class="hook">

                    <div id="hook_top_2" class="hook">
                        <!-- LOGO WIDGET -->
                        <div id="logo_wi" class="logo">
                            <div id="image_wrapper">
                                <img src="images/logo.png" alt="logo_image"/>
                            </div>
                            <div id="logo_description">
                                Candy online store
                            </div>
                            <!-- End #logo_description -->
                        </div>
                        <!-- END LOGO WIDGET -->

                        <!-- HMENU WIDGET -->
                        <div id="hmenu_wi" class="hmenu">
                            <div class="hmenu_wrapper">
                                <ul class="hmenu_list">
                                    <li>
                                        <a href="#" class="active">Home</a>
                                    </li>
                                    <li>
                                        <a href="#">Products</a>
                                    </li>
                                    <li>
                                        <a href="#">News</a>
                                    </li>
                                    <li>
                                        <a href="#">Contact</a>
                                    </li>
                                    <li>
                                        <a href="#">Products</a>
                                    </li>
                                </ul>
                            </div>
                            <!-- End hmenu_wrapper -->
                        </div>
                        <!-- END HMENU WIDGET --> 
                    </div>
                    <!-- END #hook_top_2 -->

                </div>
                <!-- End #hook_top_2 -->
            </div>
            <!-- End #wrapper_top -->

            <div id="wrapper_main">

                <div id="hook_custom_1" class="hook">
                    <div id="hook_sidebar" class="hook">

                        <!-- SEARCH BAR WIDGET -->
                        <div id="search_bar_wi" class="search_bar"> 
                            <form id="searchForm" class="searchForm" action="#" method="post">
                                <div class="search_panel">
                                    <input type="text" class="searchText" id="searchText" value="Search Keyword Here ..."/> 
                                    <input name="search" type="image" class="buttonSearch" id="buttonSearch" src="images/search_icon.png" value=""/>
                                </div>
                            </form>
                        </div>
                        <!--END SEARCH BAR WIDGET --> 

                        <!-- PRODUCT CATEGORY WIDGET -->
                        <div id="product_category_wi" class="product_category">
                            <div class="title">
                                <span>categories</span>
                            </div>
                            <!-- End .title -->

                            <ul class="category_list">
                                <li class="parent"><a href="#">Living room</a>
                                    <ul>
                                        <li><a href="#">TV Board</a></li>
                                        <li><a href="#">TV Board</a></li>
                                    </ul>
                                </li>
                                <li class="parent"><a href="#">Sitting room</a></li>
                                <li class="parent"><a href="#">Bath room</a>
                                    <ul>
                                        <li><a href="#">TV Board</a></li>
                                        <li><a href="#">TV Board</a></li>
                                    </ul>
                                </li>
                                <li class="parent"><a href="#">Film room</a></li>
                                <li class="parent"><a href="#">Bed room</a></li>
                                <li class="parent"><a href="#">Kitchen room</a></li>
                                <li class="parent"><a href="#">Bed room</a></li>
                                <li class="parent"><a href="#">Kitchen room</a></li>
                                <li class="parent"><a href="#">Bed room</a></li>
                            </ul>
                            <!-- End .category_list -->
                        </div>
                        <!-- END PRODUCT CATEGORY WIDGET -->

                        <!-- PRODUCT FILTER WIDGET -->
                        <div id="product_filter_wi" class="product_filter">
                            <div class="title">
                                <span>Special Today</span>
                            </div>
                            <!-- End .title -->

                            <div class="product_blocks">
                                <div class="image_wrapper">
                                    <a href="#"><img src="images/candy.png" alt="product_feature"/></a>
                                </div>
                                <div class="product_infor">
                                    <a class="product_name" href="#">Gummy bear Product #10</a>
                                    <div class="price">199$</div>
                                </div>
                                <!-- End .product_infor -->
                                <div class="clear"></div>  
                            </div>
                            <!-- End .product_blocks -->

                            <div class="product_blocks">
                                <div class="image_wrapper">
                                    <a href="#"><img src="images/candy.png" alt="product_feature"/></a>
                                </div>
                                <div class="product_infor">
                                    <a class="product_name" href="#">Gummy bear Product #10</a>
                                    <div class="price">199$</div>
                                </div>
                                <!-- End .product_infor -->
                                <div class="clear"></div>  
                            </div>
                            <!-- End .product_blocks -->
                        </div>
                        <!-- END PRODUCT FILTER WIDGET -->

                        <!-- HOTLINE WIDGET -->
                        <link type="text/css" rel="stylesheet" href="../../widget/hotline/1/hotline_1.css" /> 
                        <div id="hotline_wi_1" class="hotline_1">
                            <div class="hotline_wrapper">
                                <div class="hotline_content">
                                    <p class="title">Call for Free</p>
                                    <p class="phone_number">+1-234-567-8900</p>
                                    <p class="desc">Our expect staff is standing by to answer your questions</p>
                                </div><!-- End .hotline_content -->
                            </div>
                            <!-- End .hotline_wrapper -->
                        </div>
                        <!-- END HOTLINE WIDGET -->
                    </div>
                    <!-- End #hook_sidebar -->

                    <div id="hook_custom_2" class="hook">
                        <!-- CONTACT WIDGET -->
                        <div id="contact_wi_1" class="contact">
                           
                            <div class="header">
                                <span class='name'>Contact</span>
                                <span class='dots'></span>
                            </div>

                            <div class="contact_form_section">
                                <form id="contact_form" class="contact_form" action="#" method="post">
                                    <table width="100%">
                                        <tr><td valign="top" width="80px"> <label for="fullname">Full name <span class="required">*</span></label></td><td> <input type="text" name="contact_name" id="contact_name" class="input_form validate[required,minSize[3]] text-input" /></td></tr>
                                        <tr><td valign="top" width="80px">  <label for="email">Email <span class="required">*</span></label></td><td> <input type="text" name="email" id="email" class="input_form validate[required,custom[email]] text-input"/></td></tr>
                                        <tr><td valign="top" width="80px"> <label for="title">Title <span class="required">*</span></label></td><td><input type="text" name="title" id="title" class="input_form validate[required,minSize[5]] text-input"/> </td></tr>
                                        <tr><td valign="top" width="80px"> <label for="content">Enquiry <span class="required">*</span></label> </td>
                                            <td valign="top"> <textarea id="content" name="content" rows="11" class="input_area validate[required,minSize[5]] text-input"></textarea></td>
                                        </tr>
                                        <tr>	<td></td><td align="right">  <input type="submit" name="submit" value="SEND" class="submit_button"/></td></tr>
                                    </table>

                                </form>
                            </div>
                            <!-- End .contact_form_section -->

                            <div class="contact_infor_section">
                                <div class="contact_infor_title">
                                    Sweetie Company
                                </div>
                                <ul class="contact_infor_list">
                                    <li class="address"><span>Address : </span>123 Nguyen Trai.Thanh Xuan.Hanoi</li>
                                    <li class="phone_number"><span>Telephone : </span>043.8643781</li>
                                    <li class="email"><span>Email : </span>toystore@yahoo.com</li>
                                    <li class="website"><span>Website : </span>http://toystore.com/</li>
                                </ul>
                            </div>
                            <!-- End .contact_infor_section -->
                            <div class="clear"></div>
                        </div>
                        <!-- END CONTACT WIDGET -->
                    </div>
                    <!-- END #hook_custom_2 -->
                    <div class="clear"></div>
                </div>
                <!-- End #hook_custom_1 -->

            </div>
            <!-- End #wrapper_main -->

            <div id="wrapper_footer">
                <div id="hook_footer" class="hook">
                    <!-- HTML WIDGET -->
                    <div id="html_wi_1" class="html_1">
                        <img src="images/logo_footer.png" alt="logo_footer_image"/>
                    </div>
                    <!-- END HTML WIDGET -->

                    <!-- LINK LIST WIDGET -->
                    <div id="link_list_wi_1" class="link_list_1">
                        <ul class="list">
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Customer Service</a></li>
                            <li><a href="#">Site Map</a></li>
                            <li><a href="#">Search Terms</a></li>
                            <li><a href="#">Advanced Search</a></li>
                            <li><a href="#">Orders and Returns</a></li>
                            <li><a href="#">Contact Us</a></li>
                        </ul>
                    </div>
                    <!-- END LINK LIST WIDGET -->

                    <!-- COPYRIGHT WIDGET -->
                    <div id="copyright_wi" class="copyright">
                        <p>©2012 POWERED BY HANDBAG™. ALL RIGHT RESERVED.</p>
                    </div>
                    <!-- END COPYRIGHT WIDGET -->

                    <!-- SOCIAL WIDGET -->
                    <div id="social_wi" class="social">
                        <div class="header">Get social</div>
                        <ul class="list">
                            <li><a href="#"><img src="images/facebook.png" alt="facebook" /></a></li>
                            <li><a href="#"><img src="images/twitter.png" alt="twitter" /></a></li>
                            <li><a href="#"><img src="images/tumbl.png" alt="tumbl" /></a></li>
                        </ul>
                    </div>
                    <!-- END SOCIAL WIDGET -->
                </div>
            </div>
            <!-- End #wrapper_footer -->
        </div>    
        <!-- End #wrapper -->
    </body>
</html>
